<script setup lang="ts">
/* eslint-disable no-console */

const username = ref('')
const avatars = ref<any>([])
const emit = defineEmits(['logined'])
for (let i = 1; i < 11; i++) {
  avatars.value.push({
    id: i,
    url: `./avatars/${i}.jpg`,
    divId: `avatar${i}`,
    selected: false,
  })
}
function confirm() {
  console.log('确定')
  const selectedOne: any = avatars.value.filter((item: any) => {
    return item.selected === true
  })
  if (!selectedOne[0]) {
    alert('选个头像呗')
    return
  }
  emit('logined', {
    avatar: selectedOne[0].url,
    username: username.value,
  })
}
function selectOne(item: any) {
  avatars.value.forEach((element: any) => {
    if (element.selected)
      element.selected = false
  })
  item.selected = true
}
</script>
<template>
  <div class="login-box">
    <div class="login-box-wrapper">
      <h5>选择你的头像</h5>
      <div class="avatars-wrapper">
        <div v-for="item in avatars" :id="item.divId" :key="item.id" :class="['avatars-box',{active: item.selected}]" @click="selectOne(item)">
          <img class="avatars" :src="item.url" alt="pic">
        </div>
      </div>
      <h5>输入名称</h5>
      <div>
        <input v-model="username" type="text">
      </div>
      <div style="margin-top: 20px;">
        <button class="confirm" @click="confirm">
          确定
        </button>
      </div>
    </div>
  </div>
</template>
<style scoped>
.login-box{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  background-color: rgba(0,0,0,0.6);
  backdrop-filter: blur(10px);
  z-index:3;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-box-wrapper{
  padding: 20px;
  width: 500px;
  height: 380px;
  background-color: rgba(33,33,33,0.8);
}
.login-box-wrapper h5{
  color: #FFF;
}

.avatars-wrapper{
  padding: 10px;
}
.avatars-box{
  margin: 10px;
  display: inline-block;
  /* transition: all 0.5s ease-in-out; */
  box-sizing: border-box;
  width: 64px;
  height: 64px;
  cursor: pointer;
  border: 1px solid rgba(217, 160, 255,0);
}
.avatars-box.active{
  border: 3px solid rgb(0, 204, 255);
}
.avatars{
  width: 100%;
  height: 100%;
  display: block;
}
.confirm{
  color: #FFF;
  border: 1px solid white;
  padding: 5px 15px;
  border-radius: 5px;
}
</style>
